<template>
  <div style="height: 100vh;">
    <el-scrollbar style="height: 100%;">
      <el-menu
        :default-active="'/admin/home'"
        class="el-menu-vertical"
        style="overflow-x: hidden"
        :collapse="isCollapse"
        :collapse-transition="false"
        router
      >
        <div class="logo-container">
          <img src="../../assets/logo.png" alt="" class="logo" />
          <transition name="fade">
            <b v-if="!isCollapse" class="fade-text">后台管理系统</b>
          </transition>
        </div>
        <el-menu-item index="/admin/">
          <el-icon><House /></el-icon>
          <span>控制台</span>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/admin/banner">
            <template #title>
              <el-icon><Star /></el-icon>
              <span>轮播图管理</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><Star /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/admin/user/userList">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户列表</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><ShoppingCart /></el-icon>
            <span>商品管理</span>
          </template>
          <el-menu-item index="/admin/community">
            <template #title>
              <el-icon><Goods /></el-icon>
              <span>商品列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/admin/orderlist">
            <template #title>
              <el-icon><Tickets /></el-icon>
              <span>订单列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/admin/orderlist">
            <template #title>
              <el-icon><Tickets /></el-icon>
              <span>订单列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/admin/orderlist">
            <template #title>
              <el-icon><Tickets /></el-icon>
              <span>订单列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/admin/orderlist">
            <template #title>
              <el-icon><Tickets /></el-icon>
              <span>订单列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/admin/orderlist">
            <template #title>
              <el-icon><Tickets /></el-icon>
              <span>订单列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/admin/orderlist">
            <template #title>
              <el-icon><Tickets /></el-icon>
              <span>订单列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/admin/orderlist">
            <template #title>
              <el-icon><Tickets /></el-icon>
              <span>订单列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/admin/orderlist">
            <template #title>
              <el-icon><Tickets /></el-icon>
              <span>订单列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/admin/orderlist">
            <template #title>
              <el-icon><Tickets /></el-icon>
              <span>订单列表</span>
            </template>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-scrollbar>
    </div>
</template>

<script>
import { ref } from 'vue'
export default {
  props: {
    isCollapse: Boolean
  },
  setup() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.logo-container {
  display: flex;
  align-items: center;
  height: 60px;
  justify-content: center;
  animation: fadeIn 0.5s ease-out;
}

.logo {
  width: 20px;
}
.fade-text {
  color: rgb(0, 0, 0);
  margin-left: 5px;
  white-space: nowrap;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.el-menu{
  border-right: none;
}
</style>
